<template>
    <div>
        <div class="ftp-config">
            <a-form :form="form" @submit="handleSubmit">
                <a-form-item v-bind="formItemLayout" label="FTP地址">
                    <a-input v-decorator="['ftpHost']" />
                </a-form-item>
                <a-form-item v-bind="formItemLayout" label="FTP端口号">
                    <a-input-number v-decorator="['ftpPort']" />
                </a-form-item>
                <a-form-item v-bind="formItemLayout" label="FTP用户名">
                    <a-input v-decorator="['ftpUsername']" />
                </a-form-item>
                <a-form-item v-bind="formItemLayout" label="FTP密码">
                    <a-input v-decorator="['ftpPassword']" />
                </a-form-item>
                <a-form-item v-bind="formItemLayout" label="FTP远程目录" extra="请确保已经通过其他FTP客户端创建了这个目录，并且在目录名的结尾添加‘/’">
                    <a-input v-decorator="['remoteDir']" placeholder="直接输入远程FTP目录名称" />
                </a-form-item>
                <a-form-item v-bind="formItemLayout" label="文件名" extra="直接输入文件名，无需扩展名">
                    <a-input v-decorator="['fileName']" placeholder="请输入一个文件名" />
                </a-form-item>
                <a-form-item v-bind="tailFormItemLayout">
                    <a-button type="primary" html-type="submit">上传</a-button>
                    <a-button @click="testConnection">测试连接</a-button>
                </a-form-item>
            </a-form>
            <loading :active.sync="isLoading" :is-full-page="true"></loading>
        </div>
    </div>
</template>
<script>
import { mapGetters } from 'vuex';
import db from '@/components/db';
import { Modal } from 'ant-design-vue';
import Loading from 'vue-loading-overlay';
import 'vue-loading-overlay/dist/vue-loading.css';
export default {
    components: {
        Loading
    },
    data() {
        return {
            isLoading: false,
            formItemLayout: {
                labelCol: {
                    span: 6
                },
                wrapperCol: {
                    span: 14
                }
            },
            tailFormItemLayout: {
                wrapperCol: {
                    xs: {
                        span: 24,
                        offset: 0
                    },
                    sm: {
                        span: 16,
                        offset: 8
                    }
                }
            }
        };
    },
    created() {
        this.form = this.$form.createForm(this);
    },
    mounted() {
        this.form.setFieldsValue({
            ftpHost: this.ftpConfig.ftpHost,
            ftpPort: this.ftpConfig.ftpPort,
            ftpUsername: this.ftpConfig.ftpUsername,
            ftpPassword: this.ftpConfig.ftpPassword,
            remoteDir: this.ftpConfig.remoteDir,
            fileName: this.ftpConfig.fileName
        });
    },
    methods: {
        handleSubmit(e) {
            e.preventDefault();
            this.form.validateFieldsAndScroll((err, values) => {
                if (!err) {
                    console.log(values);
                    this.$store.commit('setFtpConfig', values);
                    this.isLoading = true;
                    db.saveToFtp()
                        .then(() => {
                            this.isLoading = false;
                            this.$success({
                                title: '上传成功'
                            });
                        })
                        .catch(reason => {
                            this.isLoading = false;
                            this.$error({
                                title: '错误',
                                content: reason.message
                            });
                        });
                }
            });
        },
        testConnection() {
            this.form.validateFieldsAndScroll((err, values) => {
                this.isLoading = true;
                this.$store.commit('setFtpConfig', values);
                db.testFtpConnection()
                    .then(() => {
                        this.isLoading = false;
                        this.$success({
                            title: '测试成功'
                        });
                    })
                    .catch(reason => {
                        this.isLoading = false;
                        this.$error({
                            title: '错误',
                            content: reason.message
                        });
                    });
            });
        }
    },
    computed: {
        ...mapGetters(['ftpConfig'])
    }
};
</script>
<style lang="stylus" scoped>
.ftp-config {
    margin-top: 24px;
}
</style>
